<template>
  <div id="wrapper">
    <div id="demo">


      <div id="animated">
        <div class="card card-animated"></div>
      </div>
    </div>

  </div>
</template>

<script setup>

</script>

<style lang="scss">
// @import "bourbon";
// @import "modular-scale";
// @import "breakpoint";

//
//      VARIABLES
//

$cardSize: 100px;
$cardColor: white;
$backgroundColor: #E2E1E0;

@mixin squareSize($size) {
  width: $size;
  height: $size;
}

// body {
//    background: $backgroundColor;
//    text-align: center;
// }

#wrapper {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;

  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // align-content: center;
  // justify-content: center;
}

#demo {}

#float-wrapper {
  position: fixed;
  z-index: 10;
  top: 10px;
  right: 10px;

}

.card {
  background: $cardColor;
  border-radius: 2px;
  display: inline-block;
  margin: 1rem;
  position: relative;
  @include squareSize(100px);
}

#animated {
  display: none;
  // display: block;
}

.card-animated {

  // Card 2 shadow
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);

  &:hover {

    // card 3 shadow
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }

  &:active {
    // card 1 shadow
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
}
</style>